* {
    padding: 0;
    margin: 0;
}

.title {
    text-align: center;
    font-size: 35px;
    font-family: tahoma;
    color: black;
    text-transform: uppercase;
    margin: 20px 0;
}

.mail-form {
    width: 530px;
    height: 447px;
    overflow: hidden;
    margin: 80px auto 0;
    /* background-color: rgb(181, 202, 143); */
    position: relative;
    transition: 0.4s ease-in-out;
    /* background-color: rgb(182, 129, 129); */
}

.mail-form:hover {
    /* overflow: visible; */
    height: 780px;
    transform: translateY(-200px);
}

.mail-form:hover form {
    transform: translateY(190px);
    height: auto;
}

.mail-form form {
    width: 400px;
    height: 200px;
    padding: 20px;
    background: url(../img/letter_bg.png);
    margin: 0 auto;
    position: relative;
    top: 200px;
    transition: 0.4s ease-in-out
}

.mail-form form h3 {
    font-family: tahoma;
    font-size: 24px;
    color: #757575;
    text-transform: uppercase;
    font-weight: normal;
    /* margin: 10px 0; */
}

.mail-form form .input-group {
    margin: 10px 0;
}

.mail-form form label {
    color: gray;
    font-family: tahoma;
    text-transform: capitalize;
}

.mail-form form textarea {
    height: 80px;
    width: 378px;
    padding-top: 14px;
    padding: 14px 10px 0;
    background: none;
    border-radius: 5px;
    margin-bottom: 10px;
}

.mail-form form input {
    width: 378px;
    height: 37px;
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid rgb(167, 165, 165);
    background: none;
}

.mail-form form button {
    border: none;
    background: none;
    text-transform: uppercase;
    cursor: pointer;
    font-family: tahoma;
    font-size: 24px;
    color: gray;
    text-indent: 1em;
}

.mail-before {
    position: absolute;
    bottom: 120px;
    z-index: -1;
}

.mail-after {
    position: absolute;
    bottom: -8px;
    z-index: 2;
}